| el | 您所在的位置：网站首页 › el-table-column prop属性 转义 › el |
el
|
el-table-column 结合template对某列后台数值，在前端显示对应文字，并分不同的状态，显示醒目
新需求：对table中的某列，后台数据为数字，在前端显示对应的中文，并根据数值，对数据分为三个状态，为空、进行中、完成。 对vue刚入门没多久的我，自然首先百度。 嗯，确实查到了方法。但是，不适用我的情况。 而我的情况，我是循环显示的。 利用formatter属性，可以从官方的帮助文档里查到。 slot-scope="scope"定义模板 scope 是随便起的名字,通过scope获取数据 基本模板 我一开始，在方法中进行分情况讨论。但是，无法与template结合起来使用。 res.items.forEach(element => { console.log(element.jd) if(element.jd == null){ element.jd = "当前进度为空"+"("+"0/9"+")" }else if(element.jd == "1"){ element.jd = "步骤1"+"("+(element.jd)+"/9"+")" } else if(element.jd == "2"){ element.jd = "步骤2"+"("+(element.jd)+"/9"+")" } .....最后终于完成了需求，以下为一些主要代码。 由于我这个场景比较特殊，所以首先把要不同的那列拎出来。在对状态进行判断显示对应的内容。 //针对进度这一列 //当进度为null，或者为""时，显示空，并为红色 空 //当进度为1到8时，显示为绿色 步骤1({{ scope.row.jd }}/9) 步骤2({{ scope.row.jd }}/9) //......以此类推 //当进度为9时，即完成，显示为蓝色 最后一步({{ scope.row.jd }}/9) //这个很重要，我一开始忘写了，导致表格中的其他列，不显示了。 //这块是为了显示其他列的，千万不要忘。 {{scope.row[scope.column.property]}}在为kong、jxz、wancheng设置样式。 结果如下 |
后来，采用template
如果，有更好的方法，欢迎留言。【本文地址】
公司简介
联系我们